<template>
  <section class="field">
    <ul>
      <li v-for="(item, index) in fieldList" :key="index">
        <p class="field-title">{{item.title}}</p>
        <div>
          <div v-for="(v, inde) in item.img" :key="inde">
            <img :src="v" lazy-load />
          </div>
        </div>
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
//定义ts 接口类型
interface editFormDataType {
  title: string
  img: Array<string>
}
let fieldList: editFormDataType[] = reactive([])
// 获取本地图片
const getImage = (file: string, name: string) => {
  return new URL(
    `../../../assets/images/applyField/${file}/${name}`,
    import.meta.url
  ).href
}
fieldList.push(
  ...[
    {
      title: '银行领域',
      img: [
        getImage('bank', 'Frame-304.png'),
        getImage('bank', 'Frame-305.png'),
        getImage('bank', 'Frame-306.png'),
        getImage('bank', 'Frame-307.png'),
        getImage('bank', 'Frame-308.png'),
        getImage('bank', 'Frame-309.png'),
        getImage('bank', 'Frame-310.png'),
        getImage('bank', 'Frame-311.png'),
        getImage('bank', 'Frame-312.png'),
        getImage('bank', 'Frame-313.png'),
      ],
    },
    {
      title: '证券领域',
      img: [
        getImage('security', 'Frame-294.png'),
        getImage('security', 'Frame-295.png'),
        getImage('security', 'Frame-296.png'),
        getImage('security', 'Frame-297.png'),
        getImage('security', 'Frame-298.png'),
        getImage('security', 'Frame-299.png'),
        getImage('security', 'Frame-300.png'),
        getImage('security', 'Frame-301.png'),
        getImage('security', 'Frame-302.png'),
        getImage('security', 'Frame-303.png'),
      ],
    },
    {
      title: '医院领域',
      img: [
        getImage('hospital', 'Frame-359.png'),
        getImage('hospital', 'Frame-365.png'),
        getImage('hospital', 'Frame-367.png'),
        getImage('hospital', 'Frame-368.png'),
        getImage('hospital', 'Frame-360.png'),
        getImage('hospital', 'Frame-366.png'),
        getImage('hospital', 'Frame-361.png'),
        getImage('hospital', 'Frame-362.png'),
        getImage('hospital', 'Frame-363.png'),
        getImage('hospital', 'Frame-364.png'),
      ],
    },
    {
      title: '手机领域',
      img: [
        getImage('mobile', 'Frame-371.png'),
        getImage('mobile', 'Frame-372.png'),
        getImage('mobile', 'Frame-373.png'),
        getImage('mobile', 'Frame-374.png'),
        getImage('mobile', 'Frame-375.png'),
        getImage('mobile', 'Frame-376.png'),
        getImage('mobile', 'Frame-377.png'),
        getImage('mobile', 'Frame-378.png'),
        getImage('mobile', 'Frame-379.png'),
        getImage('mobile', 'Frame-380.png'),
      ],
    },
    {
      title: '汽车领域',
      img: [
        getImage('car', 'Frame-322.png'),
        getImage('car', 'Frame-323.png'),
        getImage('car', 'Frame-324.png'),
        getImage('car', 'Frame-325.png'),
        getImage('car', 'Frame-326.png'),
        getImage('car', 'Frame-327.png'),
        getImage('car', 'Frame-328.png'),
        getImage('car', 'Frame-329.png'),
        getImage('car', 'Frame-330.png'),
        getImage('car', 'Frame-331.png'),
      ],
    },
    {
      title: '汽车领域',
      img: [
        getImage('air', 'Frame-314.png'),
        getImage('air', 'Frame-315.png'),
        getImage('air', 'Frame-316.png'),
        getImage('air', 'Frame-317.png'),
        getImage('air', 'Frame-318.png'),
        getImage('air', 'Frame-319.png'),
        getImage('air', 'Frame-320.png'),
        getImage('air', 'Frame-321.png'),
        getImage('air', 'Frame-356.png'),
        getImage('air', 'Frame-357.png'),
      ],
    },
  ]
)
</script>

<style lang="scss" scoped>
.field {
  margin-bottom: 80px;
  &-title {
    font-size: 44px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #2087e3;
    margin: 60px 0;
  }
  ul {
    li {
      > div {
        display: flex;
        flex-wrap: wrap;
        div {
          display: flex;
          justify-content: center;
          width: 20%;
          margin-bottom: 60px;
        }
        img {
          width: 96px;
          height: 97px;
        }
      }
    }
  }
}
</style>